<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangleTop {
            width: 0px;
            border-width: 100px 100px 0px 100px;
            border-color: red transparent transparent transparent;
            border-style: solid;
        }

        .triangleRight {
            width: 0px;
            border-width: 100px 100px 100px 0px;
            border-color: transparent yellowgreen transparent transparent;
            border-style: solid;
        }

        .triangleBottom {
            width: 0px;
            border-width: 0px 100px 100px 100px;
            border-color: transparent transparent cyan;
            border-style: solid;
        }

        .triangleLeft {
            width: 0px;
            border-width: 100px 0px 100px 100px;
            border-color: transparent transparent transparent yellow;
            border-style: solid;
        }


        /* 四个三角,要做哪个就把他对面的border设为0,只保留他的border-color */
    </style>
</head>

<body>
    <div class="triangleTop">

    </div>
    <div class="triangleRight">

    </div>
    <div class="triangleBottom">

    </div>
    <div class="triangleLeft">

    </div>

</body>

</html>